<template>
  <div class="index">
    <el-carousel class="top-banner" height="650px">
      <el-carousel-item v-for="(item, index) in indexBanner" :key="index" @click="openCarouselLink(item.url)"
        :style="{ background: 'url(' + item.pic_url + ')  no-repeat center' }">
      </el-carousel-item>
    </el-carousel>
    <div class="news-box">
      <div class="common-title">
        <h1>新闻动态</h1>
        <p>China New Information Consumption Competition News</p>
      </div>
      <div class="news">
        <el-image style="width: 600px; height: 360px" :src="newsImg" @click="openNewsLink()" fit="cover"></el-image>
        <div class="new-list">
          <h2 @click="goNewsList()">查看更多 ></h2>
          <div class="news-item" v-for="item in newsList" :key="item.id" @click="goDetail('news-show',item.id)">
            <h1 class="one-write">
              <i class="el-icon-caret-right"></i>{{ item.title }}
            </h1>
            <span>{{
              dayjs(item.created_at * 1000).format("YYYY-MM-DD")
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="part-2">
      <div class="part-2-item" v-for="(item, index) in matchList" :key="index">
        <div class="item-nav">
          <h1>{{ item.e_one_title }}<br />{{ item.e_two_title }}</h1>
          <p>{{ item.title }}</p>
          <div class="btn" @click="goDetail('match-show',item.id)">立即查看</div>
        </div>
        <el-image style="width: 100%; height: 420px" :src="item.pic_url" fit="cover"></el-image>
      </div>
    </div> -->
    <div class="works-box">
      <div class="common-title">
        <h1>获奖作品</h1>
        <p>China New Information Consumption Competition News</p>
      </div>
      <el-carousel class="works-card" type="card" height="330px">
        <el-carousel-item v-for="(item, index) in worksList" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.pic_url" fit="cover"
            @click="goDetail('works-show',item.id)"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="gusts-box">
      <div class="common-title">
        <h1>专家观点</h1>
        <p>China New Information Consumption Competition News</p>
      </div>
      <div class="gusts">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in indexGuests" :key="index">
            <el-image @click="goDetail('news-show',item.id)" style="width: 240px; height: 290px" :src="item.pic_url"
              fit="cover"></el-image>
            <p class="one-write">{{ item.title }}</p>
          </swiper-slide>
        </swiper>
        <div class="swiper-button swiper-button-prev" slot="button-prev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="swiper-button swiper-button-next" slot="button-next">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <div class="cooperation-box">
      <div class="common-title">
        <h1>合作伙伴</h1>
        <p>China New Information Consumption Competition News</p>
      </div>
      <div class="img-box">
        <div class="cooperation-item" v-for="(item, index) in indexCooperations" :key="index">
          <el-image style="width: 174px; height: 80px" :src="item.pic_url" fit="contain"></el-image>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    name: "index",
    components: {},
    data() {
      return {
        newsImg: require("@/assets/images/index/news_img.png"),
        swiperOption: {
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          slidesPerView: 4,
          slidesPerGroup: 4,
          paginationClickable: true,
          spaceBetween: 40,
          freeMode: true,
          // 设置点击箭头
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      ...mapActions([
        "getIndexSwiper",
        "getWorksList",
        "getIndexPartner",
        "getIndexGuests",
        "getMatchList",
        "getNewsList",
      ]),
      init() {
        this.getIndexSwiper();
        let newsData = {
          per_page: 6,
          page: 1,
          category_id: 1,
        };
        this.getNewsList(newsData);
        this.getMatchList();
        let worksData = {
          per_page: 6,
          page: 1,
        };
        this.getWorksList(worksData);
        this.getIndexGuests();
        this.getIndexPartner();
      },
      openCarouselLink(link) {
        if (link) {
          window.open(link, "_blank");
        }
      },
      openNewsLink() {
        this.$router.push({
          name: 'news-show',
          query: {
            id: 74
          },
        });
      },
      goDetail(address, id) {
        console.log(address, id)
        this.$router.push({
          name: address,
          query: {
            id: id
          },
        });
      },
      goNewsList() {
        this.$router.push({
          name: "news",
          query: {
            category_id: 1,
            category_name: '新闻动态',
          },
        });
      },
    },
    computed: {
      ...mapGetters([
        "indexBanner",
        "worksList",
        "indexGuests",
        "indexCooperations",
        "matchList",
        "newsList",
      ]),
    },
  };
</script>
<style scoped>
  .top-banner>>>.el-carousel__button {
    width: 140px;
    height: 6px;
    border-radius: 2px;
  }

  .top-banner>>>.el-carousel__indicators {
    bottom: 24px;
  }

  .news-box {
    width: 1200px;
    margin: 80px auto 100px;
  }

  .news {
    width: 1200px;
    display: flex;
    margin-top: 60px;
  }

  .news>>>.el-image {
    width: 600px;
  }

  .new-list {
    margin-left: 50px;
    width: 550px;
  }

  .new-list h2 {
    width: 100%;
    text-align: right;
    font-size: 14px;
    color: #666;
  }

  .new-list:hover h2 {
    color: #0b4696;
    cursor: pointer;
  }

  .news-item {
    display: flex;
    justify-content: space-between;
    line-height: 56px;
    height: 56px;
    border-bottom: 1px dashed #e8e8e8;
    font-size: 16px;
    cursor: pointer;
  }

  .news-item i {
    color: #fff;
    font-size: 24px;
    line-height: 56px;
    margin-right: 15px;
  }

  .news-item h1 {
    width: 70%;
    margin: 0 10px;
    color: #333;
  }

  .news-item span {
    width: 110px;
    text-align: right;
    color: #666;
  }

  .news-item:hover h1,
  .news-item:hover i,
  .news-item:hover span {
    color: #0b4696;
    font-weight: bold;
  }

  .part-2 {
    width: 100%;
    min-width: 1300px;
    height: 420px;
    margin: 40px auto;
    display: flex;
  }

  .part-2-item {
    flex: 1;
    position: relative;
  }

  .part-2-item .item-nav {
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    padding: 220px 30px 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .part-2-item h1 {
    font-size: 26px;
    line-height: 40px;
  }

  .part-2-item p {
    font-size: 20px;
    line-height: 40px;
  }

  .part-2-item .btn {
    width: 100%;
    max-width: 240px;
    height: 30px;
    background: #0b4696;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  .part-2-item>>>.el-image__inner {
    filter: grayscale(100%);
    filter: gray;
  }

  .part-2-item:hover {
    flex: 2;
  }

  .part-2-item:hover>>>.el-image__inner {
    filter: grayscale(0);
    filter: 0;
  }

  .works-box {
    width: 1200px;
    margin: 100px auto;
  }

  .works-box>>>.el-carousel__indicators--outside {
    display: none;
  }

  .works-card {
    margin-top: 60px;
  }

  .gusts {
    width: 1200px;
    margin: 60px auto;
    position: relative;
  }

  .gusts>>>.swiper-container {
    width: 1100px;
    height: 350px;
    margin: 30px auto;
    box-sizing: border-box;
    padding: 0 10px;
  }

  .gusts>>>.swiper-slide {
    height: 340px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 255, 0.15);
    cursor: pointer;
  }

  .swiper-button {
    width: 25px;
    height: 38px;
    background: rgba(176, 207, 246, 0.8);
  }

  .swiper-button i {
    color: #fff;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    font-size: 24px;
  }

  .swiper-button:hover {
    background: rgba(176, 207, 246, 1);
  }

  .gusts p {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
  }

  .cooperation-box {
    width: 1200px;
    margin: 100px auto;
  }

  .cooperation-box .img-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
  }

  .cooperation-item {
    width: 194px;
    height: 100px;
    margin: 0 7px 10px 0;
    background: #fff;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #eef0ff;
  }

  .cooperation-item:nth-of-type(6n) {
    margin-right: 0;
  }

  .cooperation-item:hover>>>.el-image__inner {
    transform: scale(1.1);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
  }
</style>
